<template>
    <div class="container">
        <div class="vip-container">
            <p class="vip-title">会员专区</p>
            <div class="content">
                <div class="creator avatar">
                    <div
                        class="avatar notshowname"
                        style="
                            background: url('https://rs.dance365.com/default_head@3x.png?imageView2/0/w/100/h/100/format/webp/ignore-error/1');
                        "
                    ></div>
                </div>

                <div class="vip-mid">
                    <div class="vip-user">
                        <div class="name">
                            1767323_NsTo
                            <span class="level_box medium" style="margin-left: 8px">
                                <i class="lv"></i>
                                <i class="lv2"></i>
                            </span>
                        </div>
                        <div class="vip-tip">开通会员尊享10大特权</div>
                    </div>
                    <div class="right-item">
                        <span
                            class="icon"
                            style="background-image: url('https://rs.dance365.com/teach_video_free.png')"
                        ></span>
                        <p>
                            以下
                            <i>743</i>
                            个会员专区课程
                            <br />
                            全部免费学习
                        </p>
                    </div>

                    <div class="right-item">
                        <span
                            class="icon"
                            style="background-image: url('https://rs.dance365.com/member_preferential.png')"
                        ></span>
                        <p data-v-512cafa4="">购买非会员专区课程<br />可获会员立减优惠</p>
                    </div>
                </div>

                <div>
                    <el-button type="primary" size="small" round color="#f93684" class="vip-free-button">
                        <span>立即开通</span>
                    </el-button>
                    <span class="more-right">查看/开通 &gt;</span>
                </div>
            </div>
        </div>
        <div class="filter-container vip-zone">
            <div class="filter-content-container fold" ref="fold">
                <el-row class="filter-row" v-for="labels in filterList" :key="labels.name">
                    <el-col :span="2" class="filter-label"> {{ labels.label }}</el-col>
                    <el-col :span="22" class="filter-content">
                        <!---->
                        <div class="select-item" v-for="item in labels.choises" :key="item.id">{{ item.name }}</div>
                    </el-col>
                </el-row>
            </div>
            <p class="fold-toggle-container">
                <span @click="changeList" ref="changelist">展开全部</span>
            </p>
        </div>
        <div class="order-container">
            <div class="order-item" :class="{ active: isChecked === 1 }" @click="changeOrder(1)">综合排序</div>
            <div class="order-item" :class="{ active: isChecked === 2 }" @click="changeOrder(2)">销量</div>
            <div class="order-item" :class="{ active: isChecked === 3 }" @click="changeOrder(3)">浏览量</div>
            <div class="order-item menu-hover-container" :class="{ active: isChecked === 4 }" @click="changeOrder(4)">
                价格
                <svg
                    viewBox="0 0 1024 1024"
                    style="vertical-align: middle; width: 15px; height: 15px; margin-left: 5px"
                >
                    <path
                        fill="currentColor"
                        d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
                    ></path>
                </svg>
                <div class="menu-content">
                    <div class="menu-item">价格由高到低</div>
                    <div class="menu-item">价格由低到高</div>
                </div>
            </div>
            <div class="order-item" :class="{ active: isChecked === 5 }" @click="changeOrder(5)">发布时间</div>
        </div>
        <VipZoneList :loading="loading"></VipZoneList>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Vip_zone",
});
</script>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useDiscoveryFilterStore } from "@/store/modules/discovery/filter";
import { storeToRefs } from "pinia";
import { useDiscoveryIntegratedStore } from "@/store/modules/discovery/integrated";

import VipZoneList from "@/views/Discovery/Vip_zone/components/VipZoneList.vue";

// 课程列表
const changelist = ref();
const fold = ref();
// 改变状态
const changeList = () => {
    // 当是展开状态时
    if (changelist.value.innerText === "展开全部") {
        changelist.value.innerText = "收起";
        // 删除class
        fold.value.classList.remove("fold");
    } else {
        changelist.value.innerText = "展开全部";
        // 添加class
        fold.value.classList.add("fold");
    }
};

// 获取筛选数据
const DiscoveryFilterStore = useDiscoveryFilterStore();
const { getFilterDataAsync } = DiscoveryFilterStore;
const { filterList } = storeToRefs(DiscoveryFilterStore);

// 请求筛选数据
onMounted(() => {
    getFilterDataAsync();
});

/*
 * @description: 排序
 * */
// 获取课程列表数据
const DiscoveryIntegratedStore = useDiscoveryIntegratedStore();
const { getIntegratedDataAsync, getSellCountDescAsync } = DiscoveryIntegratedStore;
const { integratedData } = storeToRefs(DiscoveryIntegratedStore);
const isChecked = ref(1);
const changeOrder = (index: number) => {
    isChecked.value = index;
    if (index === 1) {
        // 获取综合排序数据
        getIntegratedDataAsync().then(() => {
            setTimeout(() => {
                loading.value = false;
            }, 2000);
        });
    }
    if (index === 2) {
        // 获取销量排序数据
        getSellCountDescAsync().then(() => {
            setTimeout(() => {
                loading.value = false;
            }, 2000);
        });
    }
};
onMounted(() => {
    getIntegratedDataAsync().then(() => {
        setTimeout(() => {
            loading.value = false;
        }, 2000);
    });
});

// loading加载
const loading = ref(true);
</script>
<style scoped lang="less">
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.fold {
    height: 133px;
}

.active {
    color: #f93684 !important;
}

.vip-container {
    color: #111;
    background-color: #fff;
    margin-top: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    padding: 20px 30px 16px;

    .vip-title {
        font-size: 16px;
        margin: 0 0 16px;
        font-weight: 400;
    }

    .content {
        display: flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        position: relative;

        .avatar {
            margin-right: 10px;
            width: 50px;
            height: 50px;

            .avatar {
                width: 100% !important;
                height: 100% !important;
                border-radius: 50%;
            }

            .notshowname {
                background-size: cover !important;
                background: 50% center;
                margin-right: 0;
            }
        }

        .vip-mid {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;

            .vip-user {
                position: relative;
                min-width: 220px;

                &::before {
                    content: "";
                    height: 40px;
                    border-left: 1px solid #dee2e6;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                }

                .name {
                    padding-top: 4px;
                    font-size: 16px;

                    .level_box {
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        background: -webkit-gradient(linear, left top, left bottom, from(#ff289b), to(#ff43d0));
                        background: linear-gradient(#ff289b, #ff43d0);
                        border: 1px solid #fff;
                        border-radius: 4px;
                        padding: 0 8px;
                        display: inline-block !important;
                        line-height: 1.15;
                        white-space: nowrap;
                        cursor: pointer;

                        i {
                            width: 8px;
                            height: 10px;
                            display: inline-block;
                            background-size: 100%;
                            background-repeat: no-repeat;
                        }

                        .lv {
                            width: 15px;
                            height: 10px;
                            background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
                        }

                        .lv2 {
                            background-image: url(https://rs.dance365.com/level_num_2@3x.png);
                        }
                    }
                }

                .vip-tip {
                    margin-top: 8px;
                    font-size: 12px;
                    color: #f93684;
                }
            }

            .right-item {
                flex: 1;
                text-align: center;
                cursor: pointer;

                span {
                    width: 58px;
                    height: 58px;
                    display: inline-block;
                    background-size: 100%;
                    vertical-align: middle;
                    margin-right: 30px;
                }

                p {
                    display: inline-block;
                    vertical-align: middle;

                    i {
                        font-style: normal;
                        color: #f93684;
                    }
                }
            }
        }

        .vip-free-button {
            border-radius: 20px;
            display: block;
            margin-bottom: 8px;
        }

        .more-right {
            color: #7d8090;
            font-size: 12px;
        }
    }
}

.filter-container {
    padding: 26px 30px;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 10px;
    position: relative;

    .filter-content-container {
        overflow: hidden;

        .filter-row {
            font-size: 14px;
            margin: 0 0 16px;

            .filter-label {
                color: #b1b5c1;
                padding: 7px 0;
            }

            .filter-content {
                .select-item {
                    display: inline-block;
                    cursor: pointer;
                    font-size: 14px;
                    border-radius: 4px;
                    color: #7d8090;
                    padding: 7px 13px;
                    user-select: none;
                    margin-right: 24px;
                    margin-bottom: 10px;
                }
            }
        }
    }

    .fold-toggle-container {
        text-align: center;
        color: #f93684;
        font-size: 14px;
        margin: 20px 0 0;
        cursor: pointer;
    }
}

.order-container {
    padding: 25px 30px;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 10px;

    .order-item {
        display: inline-block;
        font-size: 14px;
        color: #7d8090;
        cursor: pointer;

        &.menu-hover-container {
            position: relative;

            .menu-content {
                display: none;
                position: absolute;
                z-index: 10020;
                top: 0;
                left: 50%;
                transform: translate(-50%, -17px);
                box-shadow: 2px 0 9px rgb(0 0 0 / 10%);
                border-radius: 4px;
                background-color: #fff;

                .menu-item {
                    padding: 17px 0;
                    width: 120px;
                    text-align: center;
                    font-size: 14px;
                    color: #111;
                    cursor: pointer;

                    &:hover {
                        color: deeppink;
                    }
                }
            }

            &:hover {
                .menu-content {
                    display: block;
                }
            }
        }
    }

    // 除了第一个,后几个左边距为60px
    .order-item:not(:first-child) {
        margin-left: 60px;
    }
}
</style>
